<template>
  <div class="footer-container">
    <div class="custom-form">
      <div class="mb">
        <div class="custom-form-item">
          <div class="custom-form-label">旗下平台</div>
          <Button @click="handleAdd('platform')">新增</Button>
        </div>
        <Row v-for="(item, index) in platform" :key="index">
          <Col :span="6">
            <div class="custom-form-item">
              <div class="custom-form-label">名称</div>
              <div class="custom-form-content">
                <Input v-model:value="item.name" placeholder="请输入名称" />
              </div>
            </div>
          </Col>
          <Col :span="6">
            <div class="custom-form-item">
              <div class="custom-form-label">网址</div>
              <div class="custom-form-content">
                <Input v-model:value="item.web" placeholder="请输入网址" />
              </div>
            </div>
          </Col>
          <Col :span="6">
            <div class="custom-form-item">
              <Button class="mr" @click="handleDel('platform', index)">删除</Button>
              <Button @click="handleShow('platform', item.show, index)">
                {{ item.show ? '隐藏' : '展示' }}
              </Button>
            </div>
          </Col>
        </Row>
      </div>
      <div class="mb">
        <div class="custom-form-item">
          <div class="custom-form-label">留学生网</div>
          <Button @click="handleAdd('lxs')">新增</Button>
        </div>
        <Row v-for="(item, index) in lxs" :key="index">
          <Col :span="6">
            <div class="custom-form-item">
              <div class="custom-form-label">名称</div>
              <div class="custom-form-content">
                <Input v-model:value="item.name" placeholder="请输入名称" />
              </div>
            </div>
          </Col>
          <Col :span="6">
            <div class="custom-form-item">
              <div class="custom-form-label">网址</div>
              <div class="custom-form-content">
                <Input v-model:value="item.web" placeholder="请输入网址" />
              </div>
            </div>
          </Col>
          <Col :span="6">
            <div class="custom-form-item">
              <Button class="mr" @click="handleDel('lxs', index)">删除</Button>
              <Button @click="handleShow('lxs', item.show, index)">
                {{ item.show ? '隐藏' : '展示' }}
              </Button>
            </div>
          </Col>
        </Row>
      </div>
      <div class="mb">
        <div class="custom-form-item">
          <div class="custom-form-label">联系我们</div>
          <Button @click="handleAdd('contact')">新增</Button>
        </div>
        <Row v-for="(item, index) in contact" :key="index">
          <Col :span="6">
            <div class="custom-form-item">
              <div class="custom-form-label">名称</div>
              <div class="custom-form-content">
                <Input v-model:value="item.name" placeholder="请输入名称" />
              </div>
            </div>
          </Col>
          <Col :span="6">
            <div class="custom-form-item">
              <div class="custom-form-label">地址</div>
              <div class="custom-form-content">
                <Input v-model:value="item.address" placeholder="请输入地址" />
              </div>
            </div>
          </Col>
          <Col :span="6">
            <div class="custom-form-item">
              <div class="custom-form-label">电话</div>
              <div class="custom-form-content">
                <Input v-model:value="item.phone" placeholder="请输入电话" />
              </div>
            </div>
          </Col>
          <Col :span="6">
            <div class="custom-form-item">
              <Button class="mr" @click="handleDel('contact', index)">删除</Button>
              <Button @click="handleShow('contact', item.show, index)">
                {{ item.show ? '隐藏' : '展示' }}
              </Button>
            </div>
          </Col>
        </Row>
      </div>
      <div>
        <div class="custom-form-item">
          <div class="custom-form-label">客服二维码</div>
          <div class="custom-form-content">
            <Spin :spinning="spinning">
              <Upload
                v-model:file-list="fileList"
                name="file"
                list-type="picture-card"
                :show-upload-list="false"
                :action="uploadImgApi"
                :before-upload="beforeUpload"
                @change="handleChange"
              >
                <img v-if="qrcode" :src="qrcode" alt="avatar" />
                <div v-else>
                  <div class="ant-upload-text">点击上传</div>
                </div>
              </Upload>
            </Spin>
          </div>
        </div>
      </div>
      <div>
        <Button type="primary" class="mt-4 enter-x" @click="handleSbumit" :loading="loading">
          保存
        </Button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, unref } from 'vue';
  import { Input, Row, Col, Button, Upload } from 'ant-design-vue';
  import { footerPlatForm, footerLxs, footerContact } from './footer.data';
  export default defineComponent({
    components: { Input, Button, Row, Col, Upload },
    setup() {
      const loading = ref(false);
      const platform = reactive(footerPlatForm);
      const lxs = reactive(footerLxs);
      const contact = reactive(footerContact);
      const qrcode = ref('');
      const spinning = ref(false);
      const fileList = ref<any[]>([]);
      const uploadImgApi = '';
      function handleSbumit() {}
      function handleShow(type, show, index) {
        console.log(type, unref(type), ref(type));
        switch (type) {
          case 'platform':
            platform[index].show = !show;
            break;
          case 'lxs':
            lxs[index].show = !show;
            break;
          case 'contact':
            contact[index].show = !show;
            break;
          default:
            break;
        }
      }
      // 上传前
      const beforeUpload = () => {
        console.log('beforeUpload');
      };
      const handleChange = () => {
        console.log('handleChange');
      };
      function handleDel(type, index) {
        switch (type) {
          case 'platform':
            platform.splice(index, 1);
            break;
          case 'lxs':
            lxs.splice(index, 1);
            break;
          case 'contact':
            contact.splice(index, 1);
            break;
          default:
            break;
        }
      }
      function handleAdd(type) {
        switch (type) {
          case 'platform':
            platform.push({
              name: '',
              web: '',
              show: true,
            });
            break;
          case 'lxs':
            lxs.push({
              name: '',
              web: '',
              show: true,
            });
            break;
          case 'contact':
            contact.push({
              name: '',
              address: '',
              phone: '',
              show: true,
            });
            break;
          default:
            break;
        }
      }
      return {
        handleAdd,
        handleSbumit,
        loading,
        handleShow,
        platform,
        lxs,
        contact,
        handleDel,
        spinning,
        fileList,
        uploadImgApi,
        beforeUpload,
        handleChange,
        qrcode,
      };
    },
  });
</script>
<style scoped lang="less">
.footer-container {
  background: #fff;
  padding: 100px;
  height: 100%;
}

.custom-form-item {
  display: flex;
  align-items: center;
  padding: 5px;
  .custom-form-content {
    flex: 1;
  }
}
.mb {
  margin-bottom: 18px;
}
.mr {
  margin-right: 6px;
}
.custom-form-label {
  padding-right: 6px;
}
</style>
